<form action="#" class="layui-form" id="api-form">
    <div class="layui-form-item">
        <div class="layui-inline">

            <label>应用ID</label>
            <div class="layui-inline">
                <input type="text" name="appId" autocomplete="off" placeholder="请输入应用ID"
                       class="layui-input">
            </div>

            <label>用户ID</label>
            <div class="layui-inline">
                <input type="text" name="userId" autocomplete="off" placeholder="请输入用户ID"
                       class="layui-input">
            </div>

            <label>token</label>
            <div class="layui-inline">
                <input type="text" name="accessToken" autocomplete="off" placeholder="请输入token"
                       class="layui-input">
            </div>
            <!--            <button class="layui-btn" lay-submit lay-filter="appInfo-table" >搜索</button>-->
            <input type="button" class="layui-btn" id="btn" value="搜索"/>
        </div>
    </div>
</form>

<script type="text/html" id="user-token-head-bar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="goEdit"><i class="layui-icon">&#xe654;</i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除
        </button>
    </div>
</script>
<script type="text/html" id="user-token-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-user-token">编辑</a>
</script>


<table class="layui-table" lay-filter="user-token-table" id="user-token-table">
</table>

<script>

    $(function () {
        render();

        search();
    });

    function search() {
        $('#btn').click(function () {
            var param = $("#api-form").serialize(); //获取搜索框的数据

            layui.use('table', function () {
                var table = layui.table;
                //渲染表格
                table.render({
                    id: 'user-token-table'
                    , elem: '#user-token-table'
                    , toolbar: '#user-token-head-bar'
                    , url: 'sys/userToken/search?' + param
                    , page: {limits: [5, 10, 15, 20, 25]}
                    , cols:  [[
                        {checkbox: true}
                        , {field: "id", title: "ID", sort: true}
                        , {field: "appId", title: "应用ID"}
                        , {field: "userId", title: "用户ID"}
                        , {field: "access_token", title: "token"}
                        , {field: "startTime", title: "开始时间"}
                        , {field: "expireTime", title: "过期时间"}
                        , {field: "right", title: "操作", toolbar: "#user-token-bar", width: 150}
                    ]]
                });
            })

        });
    }

    function render() {
        layui.use(['layer', 'table', 'form','laydate'], function () {
            var layer = layui.layer;
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;

            //渲染表格
            table.render({
                id: "user-token-table"
                , elem: "#user-token-table"
                , toolbar: "#user-token-head-bar"
                , url: "sys/userToken/table"
                , page: {limits: [5, 10, 15, 20, 25]}
                , cols: [[
                    {checkbox: true}
                    , {field: "id", title: "ID", sort: true}
                    , {field: "appId", title: "应用ID"}
                    , {field: "userId", title: "用户ID"}
                    , {field: "access_token", title: "token"}
                    , {field: "startTime", title: "开始时间"}
                    , {field: "expireTime", title: "过期时间"}
                    , {field: "right", title: "操作", toolbar: "#user-token-bar", width: 150}
                ]]
            });

            //监听工具条
            table.on('toolbar(user-token-table)', function (obj) {
                switch (obj.event) {
                    case 'goEdit':
                        //添加操作
                        openEditWindows(null);
                        break;
                    case 'delete':
                        //删除操作
                        var checkLine = table.checkStatus('user-token-table').data;
                        if (checkLine.length > 0) { //如果有选中的数据
                            layer.confirm('你确定要删除数据吗？', function (index) {
                                var param = "";
                                $.each(checkLine, function (i, e) {
                                    param += "&ids=" + e.id;
                                })
                                //发送ajax请求
                                $.ajax({
                                    url: "sys/userToken/delete"
                                    , type: 'POST'
                                    , data: param
                                    , success: function (result) {
                                        if (result.state) {
                                            table.reload('user-token-table', {});  //重新加载表格
                                        } else {
                                            layer.msg(result.message);
                                        }
                                        layer.close(index);
                                    }
                                });
                            })

                        }

                        break;
                }
            });

            table.on('tool(user-token-table)', function (obj) {
                switch (obj.event) {
                    case 'edit-user-token':
                        openEditWindows(obj.data)
                        break;
                }
            })

            //添加或编辑操作
            function openEditWindows(data) {
                layer.open({
                    type: 1   //显示第一种类型的弹窗
                    , content: $("#user-token-edit-layer").html()
                    , title: "编辑"
                    , area: ['500px', '400px']
                    , btn: ['提交', '取消']
                    , success: function (index, layero) {  //弹出弹框的回调函数
                        //加载form表单
                        form.render();

                        if (data != null) {    //编辑操作,回显数据
                            form.val("user-token-edit-form", data);
                        }

                        //渲染laydate组件
                        laydate.render({
                            elem:'#startTime'
                            ,type:'datetime'
                        });
                        laydate.render({
                            elem:'#expireTime'
                            ,type:'datetime'
                        });

                        //渲染应用ID下拉框
                        $.ajax({
                            url:'sys/appinfo/tree',
                            type:'POST',
                            success:function (result) {
                                $.each(result,function (i,e) {
                                        if (data&&data.appId&&data.appId==e.id){
                                            $("#appId").append("<option selected value='"+e.id+"'>"+e.id+"</option>");
                                        }else {
                                            $("#appId").append("<option value='"+e.id+"'>"+e.id+"</option>");
                                        }
                                });
                                form.render();
                            }
                        });

                        //渲染用户ID下拉框
                        $.ajax({
                            url:'sys/admin/tree',
                            type:'POST',
                            success:function (result) {
                                $.each(result,function (i,e) {
                                    if (data&&data.userId&&data.userId==e.id){
                                        $("#userId").append("<option selected value='"+e.id+"'>"+e.id+"</option>");
                                    }else {
                                        $("#userId").append("<option value='"+e.id+"'>"+e.id+"</option>");
                                    }
                                });
                                form.render();
                            }
                        });



                    }
                    , yes: function (index, layero) {  //点击提交的回调函数
                        layer.load();
                        var postParam = {};
                        $.each($("#user-token-edit-form").serializeArray(),function (i,e) {
                            postParam[e.name]=e.value;
                        })

                        $.ajax({
                            url: "sys/userToken/" + (data == null ? "add" : "update")
                            , type: 'POST'
                            , contentType:'application/json'
                            , data: JSON.stringify(postParam)
                            , dataType:'JSON'
                            , success: function (result) {
                                if (result.state) {
                                    table.reload("user-token-table");  //刷新表格
                                    layer.close(index); //关闭当前弹出层
                                } else {
                                    layer.msg(result.message);
                                }
                                layer.closeAll();
                            }
                        });
                    }
                });
            }

        });


    }
</script>

<script type="text/html" id="user-token-edit-layer">
    <form id="user-token-edit-form" style="width: 80%" class="layui-form"
          lay-filter="user-token-edit-form">
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">选择应用ID</label>
            <div class="layui-input-block">
                <select id="appId" name="appId"></select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择用户ID</label>
            <div class="layui-input-block">
                <select id="userId" name="userId"></select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">token</label>
            <div class="layui-input-block">
                <input type="text" name="access_token" required lay-verify="required" placeholder="请输入token"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">起始时间</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="startTime" id="startTime" readonly>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">过期时间</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="expireTime" id="expireTime" readonly>
            </div>
        </div>



    </form>
</script>


